<template>
	<el-container>
		<el-header>
			分销设置
		</el-header>
		<el-main style="background-color: #FFF">
			<el-form :model="form" :rules="formRules" ref="configForm" label-width="140px" label-position="left" v-loading="isLoading">
				<el-tabs v-model="activeName" class="demo-tabs">
					<el-tab-pane label="基本设置" name="tt10">
						<el-form-item label="是否开启分销">
							<el-radio-group v-model="form.level_config">
								<el-radio :label="1">开启</el-radio>
								<el-radio :label="0">关闭</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="是否开启自购分佣">
							<div>
								<el-radio-group v-model="form.self_purchase_rebate">
									<el-radio :label="1">开启</el-radio>
									<el-radio :label="0">关闭</el-radio>
								</el-radio-group>
								<div class="el-form-item-help">
									开启后，分销商可以自购分佣
								</div>
							</div>
						</el-form-item>
						<el-form-item label="是否开启分销申请">
							<div>
								<el-radio-group v-model="form.is_apply">
									<el-radio :label="1">开启</el-radio>
									<el-radio :label="0">关闭</el-radio>
								</el-radio-group>
								<div class="el-form-item-help">
									开启后，手机端入口显示，关闭后，手机端入口不显示
								</div>
							</div>
						</el-form-item>
						<el-form-item label="是否展示商品详情一级佣金">
							<div>
								<el-radio-group v-model="form.is_commission_money">
									<el-radio :label="1">开启</el-radio>
									<el-radio :label="0">关闭</el-radio>
								</el-radio-group>
								<div class="el-form-item-help">
									开启后，商品详情显示，关闭后，商品详情不显示
								</div>
							</div>
						</el-form-item>
					</el-tab-pane>
					<el-tab-pane label="结算设置" name="tt20">
						<el-form-item label="提现等待期" prop="waiting_period">
							<div>
								<div style="display: flex;">
									<el-input-number v-model="form.waiting_period" :min="0" :max="90" :precision="0" :controls="false" />
									<div class="el-input-group__append">天</div>
								</div>
								<div class="el-form-item-help">
									在确认收货后等待多少天可以进行提现，0天无等待期，最大90天
								</div>
							</div>
						</el-form-item>
						<el-form-item label="最低提现金额" prop="lowest_withdraw">
							<el-input-number v-model="form.lowest_withdraw" :min="0" :max="90" :precision="0" :controls="false" />
							<div class="el-input-group__append">元</div>
						</el-form-item>
						<el-form-item label="佣金提现手续费" prop="withdraw_rate">
							<el-input-number v-model="form.withdraw_rate" :min="0" :max="100" :precision="2" :controls="false" />
							<div class="el-input-group__append">%</div>
						</el-form-item>
						<el-form-item label="免手续费区间" prop="min_no_fee">
							<div style="display: flex">
								<el-input-number v-model="form.min_no_fee" :min="0" :precision="2" :controls="false" />
								<div class="el-input-group__append">元 至</div>
								<el-input-number
									v-model="form.max_no_fee"
									:min="form.min_no_fee"
									:precision="2"
									:controls="false"
								/>
								<div class="el-input-group__append">元</div>
							</div>
						</el-form-item>
					</el-tab-pane>
					<el-tab-pane label="文字设置" name="tt30">
						<el-form-item label="分销概念" prop="text_concept">
							<div>
								<el-input v-model="form.text_concept"/>
								<div class="el-form-item-help">
									更改分销概念的名称,在我的分销中心以及申请成为分销商页面,会用新的分销概念名称替换分销
								</div>
							</div>
						</el-form-item>
						<el-form-item label="分销商名称" prop="text_fenxiao_name">
							<div>
								<el-input v-model="form.text_fenxiao_name"/>
								<div class="el-form-item-help">
									更改分销商的名称,在我的分销中心以及申请成为分销商页面,会用新的分销商名称替换分销商
								</div>
							</div>
						</el-form-item>
						<el-form-item label="提现" prop="text_withdraw">
							<div>
								<el-input v-model="form.text_withdraw"/>
								<div class="el-form-item-help">
									更改提现名称,在我的分销中心以及申请成为分销商页面,会用新的提现名称替换提现
								</div>
							</div>
						</el-form-item>
						<el-form-item label="佣金" prop="text_account">
							<div>
								<el-input v-model="form.text_account"/>
								<div class="el-form-item-help">
									更改佣金名称,在我的分销中心以及申请成为分销商页面,会用新的分佣金名称替换佣金
								</div>
							</div>
						</el-form-item>
						<el-form-item label="我的团队" prop="text_my_team">
							<div>
								<el-input v-model="form.text_my_team"/>
								<div class="el-form-item-help">
									更改我的团队名称,在我的分销中心以及申请成为分销商页面,会用新的我的团队名称替换我的团队
								</div>
							</div>
						</el-form-item>
						<el-form-item label="下线" prop="text_child">
							<div>
								<el-input v-model="form.text_child"/>
								<div class="el-form-item-help">
									更改下线名称,在我的分销中心以及申请成为分销商页面,会用新的下线名称替换下线
								</div>
							</div>
						</el-form-item>


					</el-tab-pane>
				</el-tabs>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">保 存</el-button>
				</el-form-item>
			</el-form>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "fenxiao-config",
	data() {
		return {
			activeName: 'tt10',
			isLoading: false,
			form: {
				level_config: 0,
				self_purchase_rebate: 1,
				is_apply: 1,
				is_commission_money: 1,
				waiting_period: 0,
				lowest_withdraw: 0,
				withdraw_rate: 0,
				min_no_fee: 0,
				max_no_fee: 0,
				text_concept: '分销',
				text_fenxiao_name: '分销商',
				text_withdraw: '提现',
				text_account: '佣金',
				text_my_team: '团队',
				text_child: '下线',
			},
			formRules: {
				waiting_period: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				lowest_withdraw: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				withdraw_rate: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				min_no_fee: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				max_no_fee: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_concept: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_fenxiao_name: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_withdraw: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_account: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_my_team: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
				text_child: [
					{
						required: true,
						message: '不能为空',
						trigger: 'change',
					},
				],
			}
		}
	},
	mounted() {
		this.getConfigData();
	},
	methods:{
		getConfigData() {
			this.isLoading = true;
			this.$API.fenxiao.config.info().then(res => {
				this.isLoading = false;
				if (res.code === 0) {
					if (typeof res.level_config != undefined) {
						this.form = res.data;
					}
					else {
						this.$message.error(res.message);
					}
				}
			})
		},
		async onSubmit() {
			try {
				await this.$refs.configForm.validate();
			}
			catch (e) {
				console.log(e);
				return;
			}
			this.isLoading = true;
			this.$API.fenxiao.config.update(this.form).then(res => {
				this.isLoading = false;
				if (res.code === 0) {
					this.$message.success('保存成功');
				}
				else {
					this.$message.error(res.message);
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.el-form-item-help{
	color: #AAA;
}
.el-input-group__append{
	border: none;
	width: auto;
}
</style>
